<template>
	<view>
		<u-navbar placeholder fixed autoBack bgColor="#21A5F3" leftIconColor="#fff"><view slot="center" style="font-size: 16px;color: #FFFFFF;">考勤功能</view></u-navbar>

		<view class="d-p-30">
			<view><text class="d-font-36" style="font-weight: bold;">考勤打卡</text></view>
			<view class="d-flex d-m-t-32">
				<!-- 这里两个图 -->
				<view class="d-flex-1" @click="signCard"><u--image src="/static/image/kaoqing.png" width="330rpx" height="130rpx" radius="10rpx"></u--image></view>
				<!-- <view class="d-flex-1 d-m-l-30" @click="makeCard()"><u--image src="/static/image/buka.png" width="330rpx" height="130rpx" radius="10rpx"></u--image></view> -->
			</view>

			<view class="d-m-t-50"><text class="d-font-36" style="font-weight: bold;">考勤汇总</text></view>

			<view class="card d-m-t-30 d-p-30">
				<view class="d-flex">
					<text class="d-font-32" style="font-weight: bold;">当前月份</text>
					<text class="d-font-36 d-m-l-20 d-flex-1" style="font-weight: bold;">{{ form.nym }}</text>
					<view @click="show.showDate = true" class="d-font-24 d-flex d-row-center d-col-center" style="color: #505355;">
						<text class="d-m-r-20">{{ form.ym }}</text>
						<u-icon style="position: relative;top: 4rpx;" name="arrow-down" size="24rpx" color="#DFDFDF"></u-icon>
					</view>
				</view>

				<view class="d-flex d-text-center d-m-t-30">
					<view class="d-flex-1" style="color: #162233;">
						<view>
							<text style="font-size: 52rpx;font-weight: bold;">{{ psatd ? psatd.day : 0 }}</text>
							<text class="d-font-20">天</text>
						</view>
						<text class="d-font-24">应出勤</text>
					</view>
					<view class="d-flex-1" style="color: #162233;">
						<view>
							<text style="font-size: 52rpx;font-weight: bold;">{{ psatd ? psatd.atdStaffs : 0 }}</text>
							<text class="d-font-20">天</text>
						</view>
						<text class="d-font-24">实际出勤</text>
					</view>
					<view class="d-flex-1" style="color: #162233;">
						<view>
							<text style="font-size: 52rpx;font-weight: bold;color: #E94343;">{{ psatd ? psatd.unatdStaffs : 0 }}</text>
							<text class="d-font-20">天</text>
						</view>
						<text class="d-font-24">未出勤天数</text>
					</view>
					<view class="d-flex-1" style="color: #162233;">
						<view>
							<!-- todo 没有 -->
							<text style="font-size: 52rpx;font-weight: bold;">{{ psatd && psatd.workHours ? psatd.workHours : 0 }}</text>
						</view>
						<text class="d-font-24">合计工时</text>
					</view>
				</view>
			</view>

			<view class="card d-m-t-30 d-p-30">
				<view><text class="d-font-32" style="font-weight: bold;">当日考勤</text></view>
				<view class="d-flex d-m-t-20" style="color: #5D6672;">
					<text class="d-flex-1 d-font-28">入场时间 {{ nowAd && nowAd.zzjcsj ? nowAd.zzjcsj : '无记录' }}</text>
					<text class="d-font-28">出场时间 {{ nowAd && nowAd.zwccsj ? nowAd.zwccsj : '无记录' }}</text>
				</view>
			</view>

			<view class="d-m-t-50"><text class="d-font-36" style="font-weight: bold;">考勤统计</text></view>

			<view class="card d-m-t-30 d-p-30">
				<!-- https://ext.dcloud.net.cn/plugin?id=1795 -->
				<calendar ref="calendar" :headerBar="false" :disabledAfter="true" :collapsible="false" :markDays="markDays" @onDayClick="onDayClick"></calendar>
				<!-- 异常点击到补卡 带上点击的日期 -->
				<view class="d-flex d-font-24" style="color: #ADB4BD;">
					<view class="d-flex-1"></view>
					<view class="tag"></view>
					<view class="d-m-l-20"><text>正常出勤</text></view>
					<view class="tag2"></view>
					<view class="d-m-l-20"><text>考勤异常</text></view>
				</view>
			</view>

			<view class="card d-p-30 d-m-t-30">
				<view class="d-font-32 d-text-center " style="color: #5D6672;font-weight: bold;">{{ $user.userName }}的考勤明细</view>
				<view class="d-text-center d-font-24 d-m-b-30" style="color: #5D6672;font-weight: bold;">{{ nowDataYMD }}</view>
				<view class="table d-text-center">
					<view class="tr">
						<view class="th">考勤规则</view>
						<view class="th">状态</view>
						<view class="th">考勤时间</view>
						<view class="th">操作</view>
					</view>
					<view class="tr" v-for="(item, index) in list" :key="index">
						<view class="td">{{ item.gzdksj }}</view>
						<view class="td">{{ item.status == 1 ? '入场' : '出场' }}</view>
						<view class="td">{{ item.dksj ? $moment(item.dksj).format('HH:mm') : '' }}</view>
						<view class="td">
							<text class="d-m-r-10" style="color: #21A5F3;" v-if="item.ywbh" @click="bkinfo(item.ywbh)">查看</text>
							<text class="d-m-r-10" style="color: #21A5F3;" v-if="item.image" @click="vPhoto(item.image)">预览</text>
							<text style="color: #21A5F3;" v-if="!item.dksj" @click="makeCard(item)">补卡</text>
						</view>
					</view>
				</view>
				<template v-if="!list || list.length <= 0">
					<view class="d-p-t-30"><u-empty text="暂无记录" icon="/static/image/none.png"></u-empty></view>
				</template>
			</view>
		</view>
		<u-datetime-picker
			mode="year-month"
			:show="show.showDate"
			@cancel="show.showDate = false"
			@confirm="setYM"
			:maxDate="form.time"
			closeOnClickOverlay
			:value="form.stime"
		></u-datetime-picker>
	</view>
</template>

<script>
import { getPsatd, getNowAd, getDate, makeUpCard } from '../../../common/api.js';
import calendar from './calendar.vue';
export default {
	components: {
		calendar
	},
	data() {
		return {
			show: {
				showDate: false
			},
			form: {
				date: '',
				ym: '',
				time: '',
				md: '',
				stime: '' // 选中的值
			},
			psatd: null, // 月考勤
			nowAd: null, // 日考勤
			markDays: [], // 标记
			nowDataYMD: null,
			list: []
		};
	},
	onLoad() {
		this.nowDataYMD = this.$moment().format('YYYY-MM-DD');
		this.form.time = new Date().getTime();
		this.form.stime = this.form.time;
		this.form.date = uni.$u.timeFormat(this.form.time, 'yyyy-mm-dd');
		this.form.ym = uni.$u.timeFormat(this.form.time, 'yyyy-mm');
		this.form.nym = uni.$u.timeFormat(this.form.time, 'yyyy-mm');
	},
	onShow() {
		this.init();
	},
	methods: {
		init() {
			if (!this.$user.ssgcxx) {
				return false;
			}
			// 考勤
			this.getPsatd();
			// 当日考勤
			this.getNowAd();
			// 考勤统计
			// this.getCalendar();
			// 进出明细
			this.getDayData();
		},
		getPsatd() {
			// 考勤
			getPsatd({
				params: {
					bzid: this.$user.ssgcxx[this.$appIndex].bzid, // 班组id
					rybh: this.$user.ssgcxx[this.$appIndex].rybh, // 人员id
					date: this.form.date // 查询日期 y-m-d
				}
			}).then(e => {
				this.psatd = e.data;
				// 考勤统计
				this.getCalendar();
			});
		},
		getNowAd() {
			// 当日考勤
			getNowAd({
				params: {
					bzid: this.$user.ssgcxx[this.$appIndex].bzid, // 班组id
					rybh: this.$user.ssgcxx[this.$appIndex].rybh, // 人员id
					date: this.form.date // 查询日期 y-m-d
				}
			}).then(e => {
				if (e.data) {
					// 格式化 his;
					if (e.data.zwccsj) {
						e.data.zwccsj = this.$moment(e.data.zwccsj).format('HH:mm:ss');
					}
					if (e.data.zzjcsj) {
						e.data.zzjcsj = this.$moment(e.data.zzjcsj).format('HH:mm:ss');
					}
				}
				this.nowAd = e.data;
			});
		},
		getCalendar() {
			// 日历数据
			getDate({
				params: {
					rybh: this.$user.ssgcxx[this.$appIndex].rybh, // 人员id
					kqrq: this.form.date
				}
			}).then(e => {
				this.markDays = e.data;
				// console.log(e)
			});
		},
		setYM(e) {
			// 时间搜索
			this.form.stime = e.value;
			this.form.date = uni.$u.timeFormat(this.form.stime, 'yyyy-mm-dd');
			this.form.ym = uni.$u.timeFormat(this.form.stime, 'yyyy-mm');
			this.show.showDate = false;

			// 日期 - 日历联动
			this.$refs.calendar.changYearMonth(uni.$u.timeFormat(this.form.stime, 'yyyy'), Number(uni.$u.timeFormat(this.form.stime, 'mm')));

			this.getPsatd();
		},
		signCard() {
			uni.$u.route({ url: '/pages/index/work/signCard' });
		},
		makeCard(e) {
			if (e?.status) {
				uni.$u.route({
					url: '/pages/index/work/makeCard',
					params: {
						bklx: e.status,
						bksj: this.nowDataYMD + ' ' + e.gzdksj + ':00'
					}
				});
			} else {
				uni.$u.route({
					url: '/pages/index/work/makeCard'
				});
			}
		},
		onDayClick(e) {
			this.nowDataYMD = e.response.date;
			this.getDayData();
		},
		getDayData() {
			makeUpCard({
				rybh: this.$user.ssgcxx[this.$appIndex].rybh, // 人员id
				bksj: this.nowDataYMD,
				gcbh: this.$user.ssgcxx[this.$appIndex].gcbh,
				bzid: this.$user.ssgcxx[this.$appIndex].bzid
			}).then(e => {
				this.list = e.data;
			});
		},
		vPhoto(e) {
			if (!e) {
				return uni.$u.toast('暂无可预览图片');
			}
			uni.previewImage({
				count: e,
				urls: [e]
			});
		},
		bkinfo(id) {
			uni.$u.route({
				url: '/pages/index/work/bkinfo',
				params: {
					id
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fbfcfc;
	.card {
		box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);
		border-radius: 10rpx;
		background-color: #ffffff;

		.tag {
			width: 28rpx;
			height: 28rpx;
			background: #21a5f3;
			border-radius: 50%;
		}
		.tag2 {
			width: 28rpx;
			height: 28rpx;
			background: #e94343;
			border-radius: 50%;
			margin-left: 50rpx;
		}

		.table {
			font-size: 28rpx;
			display: table;
			width: 100%;
			vertical-align: middle;
			border: 1px solid #f6f7f8;
			.tr {
				display: table-row;
				.th,
				.td {
					display: table-cell;
					height: 80rpx;
					vertical-align: middle;
				}
				.th {
					font-weight: bold;
					color: #162233;
				}
				&:nth-child(2n-1) {
					background-color: #f6f7f8;
				}
			}
		}
	}
}
</style>
